<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import _ from 'lodash';
import { saveStorage, getStorage } from '@/utils';
import search from '@/assets/ai/search.svg';
import center from '@/faker/center';
import settings from '@/faker/settings';

const state = reactive({
  bots: [] as any,
  botTemp: [] as any,
  // 切换
  activeName: '' as any,
  sxList: [] as any,
  keyword: '' as String,
  settingData: [] as any,
});

const emits = defineEmits(['change', 'searchChange', 'getList']);

onMounted(async () => {
  state.activeName = getStorage('writeActiveName');
  getBot();
});

const getBot = async () => {
  const data = center;
  if (state.activeName) {
    state.bots = _.filter(data, v => v.category === state.activeName);
  } else {
    state.bots = data;
  }
  state.botTemp = data;
  emits('getList', data);
  const setData = settings;
  state.settingData = setData;
  getCate();
};

const getCate = async () => {
  const temp = state.settingData;
  state.sxList = _.map(temp, v => {
    const num = _.filter(state.botTemp, { category: v.code }).length;
    return {
      ...v,
      num,
    };
  });
  state.sxList.unshift({
    code: '',
    name: '全部',
    num: state.botTemp.length,
  });
};

// 筛选切换
const tabClick = async () => {
  saveStorage('writeActiveName', state.activeName);
  emits('change', state.activeName);
};

// 搜索
const searchChange = (e: any) => {
  emits('searchChange', e.target.value);
};
</script>

<template>
  <div class="tabsComponents">
    <el-tabs v-model="state.activeName" class="demo-tabs" @tab-change="tabClick">
      <el-tab-pane v-for="(item, key) in state.sxList" :key="key" :name="item.code">
        <template #label>
          <span :class="`custom-tabs-label ${state.activeName === item.code ? 'tab-checked' : ''}`">
            {{ item.name }}
          </span>
          <!-- <span class="tab-num">{{ item.num }}</span> -->
        </template>
      </el-tab-pane>
    </el-tabs>

    <div class="searchBox">
      <img :src="search" alt="" srcset="" />
      <input type="text" v-model="state.keyword" class="my-input" @input="searchChange" placeholder="60款AI应用上新" />
    </div>
  </div>
</template>

<style lang="scss">
@use './index.scss';
.searchBox {
  .my-input::placeholder {
    color: #a4a4a4 !important;
  }
}
</style>
